import { useHistory, Link } from "react-router-dom";
import InfoRoutes from "../router/infoRoutes";
import { Menu } from "antd";
import {
  ScheduleOutlined,
  TeamOutlined,
  UserOutlined,
  ShoppingOutlined,
  MoneyCollectOutlined,
  AppstoreOutlined,
} from "@ant-design/icons";

const { SubMenu } = Menu;
// eslint-disable-next-line
export default () => {
  const history = useHistory();
  const handleClick = ({ key }) => {
    history.push(key);
  };

  return (
    <div style={{ display: "flex" }}>
      <Menu
        onClick={handleClick}
        style={{ width: 256, minHeight: "100vh" }}
        // defaultOpenKeys={["sub1"]}
        mode="inline"
        theme="dark"
      >
        <SubMenu key="sub1" icon={<ShoppingOutlined />} title="商品">
          <Menu.Item key="/info/productlist">商品列表</Menu.Item>
          <Menu.Item key="/info/add">新增商品</Menu.Item>
        </SubMenu>
        <SubMenu key="sub2" icon={<MoneyCollectOutlined />} title="优惠券">
          <Menu.Item key="/info/coupons">优惠券列表</Menu.Item>
          <Menu.Item key="/info/addCoupons">新增优惠券</Menu.Item>
        </SubMenu>
        <SubMenu key="sub3" icon={<AppstoreOutlined />} title="商品类型">
          <Menu.Item key="/info/navs">商品大类列表</Menu.Item>
          <Menu.Item key="/info/addNav">新增商品大类</Menu.Item>
          <Menu.Item key="/info/tabs">商品类型列表</Menu.Item>
          <Menu.Item key="/info/addTab">新增商品类型</Menu.Item>
        </SubMenu>
        <SubMenu key="sub4" icon={<ScheduleOutlined />} title="订单">
          <Menu.Item key="orders">
            <Link to="/info/orders">订单列表</Link>
          </Menu.Item>
        </SubMenu>
        <SubMenu key="sub5" icon={<UserOutlined />} title="管理员">
          <Menu.Item key="/info/admins">管理员列表</Menu.Item>
        </SubMenu>
        <SubMenu key="sub6" icon={<TeamOutlined />} title="用户">
          <Menu.Item key="/info/users">用户列表</Menu.Item>
        </SubMenu>
      </Menu>
      <div style={{ flex: 1, padding: "10px" }}>
        <InfoRoutes />
      </div>
    </div>
  );
};
